<template>
	<scroll-view scroll-y="true" :class="{'fiexd-height':!page}" @scrolltolower="getEventData">
		<view class="event-list" v-if="eventData">
			<view class="event-item" v-for="(event,index) in eventData" :key="index">
				<view class="top-user-info">
					<image class="avatar" :src="userInfo.profile.avatarUrl" :lazy-load="true" mode="widthFix"></image>
					<view class="right-info">
						<text class="nickname">{{userInfo.profile.nickname}}<text>分享单曲</text></text>
						<text class="time">7月28日</text>
					</view>
				</view>
				<view class="main-box">
					<text class="my-content">{{event.msg}}</text>
					<view class="content-box">
						<image :src="event.song.img80x80" :lazy-load="true" mode="widthFix"></image>
						<view class="right-info">
						  <text class="content">{{event.song.name}}</text>
						  <text class="singer" v-for="singer in event.song.artists" :key="singer.id">{{singer.name}}</text>
						</view>
					</view>
					<view class="control-box">
						<view class="control-item">
							<text class="icon iconfont icon-fenxiang1"></text>
							<text class="lable">转发</text>
						</view>
						<view class="control-item">
							<text class="icon iconfont icon-pinglun"></text>
							<text class="lable">评论</text>
						</view>
						<view class="control-item">
							<text class="icon iconfont icon-dianzan"></text>
							<text class="lable">点赞</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		props:{
			userId:{
				type:[Number,String],
				default:''
			},
			page:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				eventData:[],
				lasttime:-1
			}
		},
		created() {
			this.getEventData()
		},
		computed:{
			...mapState(['themeType','cookie','userInfo'])
		},
		methods:{
			getEventData(){
				this.request({
					url:"/user/event?limit=10&uid="+this.userId+"&cookie="+this.cookie+"&lasttime="+this.lasttime
				}).then(res=>{
					if(res.code===400) return false
					this.lasttime=res.lasttime
					let eventData=res.events.map(val=>{
						let value=JSON.parse(val.json)
						return {
							msg:value.msg,
							song:value.song
						}
					})
					this.eventData=[...this.eventData,...eventData.filter(val=>val.song)]
					console.log(this.eventData)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fiexd-height{
		height: 400rpx;
	}
	.event-list{
		color: #807e80;
		.event-item{
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 28rpx;
			image{
				width: 80rpx;
				height: 80rpx;
			}
			.right-info{
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
			}
			.top-user-info{
				display: flex;
				.avatar{
					border-radius: 50%;
				}
				.right-info{
					.nickname{
						color: #4579d4;
						font-size: 28rpx;
						text{
							color: #535355;
						}
					}
					.time{
						font-size: 24rpx;
					}
				}
			}
			.main-box{padding-left: 100rpx;
				.my-content{
					line-height: 60rpx;
				}
				.content-box{
					display: flex;
					.content{
						color: #fff;
						font-size: 28rpx;
					}
					.singer{
						font-size: 24rpx;
					}
				}
				.control-box{
					display: flex;
					.control-item{
						padding: 20rpx;
					}
				}
			}
		}
	}
</style>
